<template>
	<view class="captcha-box">
		<view class="captcha-img-box">
			<uni-icons class="loding" size="20px" color="#BBB" v-if="loging" type="spinner-cycle"></uni-icons>
			<image class="captcha-img" :class="{opacity:loging}" @click="getImageCaptcha" :src="captchaImg"
				mode="widthFix"></image>
		</view>
		<uni-easyinput @blur="focusCaptchaInput = false" :focus="focusCaptchaInput" type="text" class="captcha"
			:inputBorder="false" v-model="modelValue.captcha" placeholder="请输入验证码" trim="all" prefixIcon="checkbox" />
			
<!-- 		<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable type="password"
			:inputBorder="false" v-model="单项.password" placeholder="请输入验证码" trim="all" prefixIcon="locked" /> -->

	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { getCaptcha } from "@/api/api"

	const props = defineProps({
		scene: {
			type: String,
			default: ""
		},
		focus: {
			type: Boolean,
			default: false
		}
	});

	const modelValue = defineModel();

	// 定义响应式数据
	const focusCaptchaInput = ref(false);
	const captchaImg = ref("");
	const loging = ref(false);

	// 获取图片验证码的方法
	const getImageCaptcha = async (focus = true) => {
		loging.value = true;
		if (focus) {
			modelValue.value.captcha = '';
			focusCaptchaInput.value = true;
		}

		// uniIdCo.getImageCaptcha({
		// 		scene: props.scene
		// 	})
		// 	.then(result => {
		// 		captchaBase64.value = result.captchaBase64;
		// 	})
		// 	.catch(e => {
		// 		uni.showToast({
		// 			title: e.message,
		// 			icon: 'none'
		// 		});
		// 	})
		// 	.finally(() => {
		// 		loging.value = false;
		// 	});
		const res = await getCaptcha()
		if (res.code === 0) {
			captchaImg.value = res.data.picPath
			modelValue.value.captchaId = res.data.captchaId
		}
		loging.value = false;
	};

	watch(() => props.scene, (scene) => {
		if (scene) {
			getImageCaptcha(props.focus);
		} else {
			uni.showToast({
				title: 'scene不能为空',
				icon: 'none'
			});
		}
	}, { immediate: true });
	// 暴露需要在模板中使用的变量和方法
	defineExpose({
		getImageCaptcha
	});
</script>
<style lang="scss" scoped>
	.captcha-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}

	.captcha-img-box,
	.captcha {
		height: 44px;
		line-height: 44px;
	}

	.captcha-img-box {
		position: relative;
		background-color: #FEFAE7;
	}

	.captcha {
		background-color:  #F8F8F8;
		font-size: 14px;
		flex: 1;
		padding: 0 20rpx;
		margin-left: 20rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.captcha-img-box,
	.captcha-img,
	.loding {
		height: 44px !important;
		width: 100px;
	}

	.captcha-img {
		cursor: pointer;
	}

	.loding {
		z-index: 9;
		color: #bbb;
		position: absolute;
		text-align: center;
		line-height: 45px;
		animation: rotate 1s linear infinite;
	}

	.opacity {
		opacity: 0.5;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}
</style>